<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>编辑信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-container">
<!--    th:object="${adzixun}"-->
    <div class="layui-form layuimini-form" th:object="${Zixun}">
        <input type="hidden" th:field="*{id}">
        <div class="layui-form-item">
            <label class="layui-form-label required">发布人</label>
            <div class="layui-input-block" >
                <input type="text" th:field="*{u_name}" id="u_name" name="u_name" lay-verify="required" lay-reqtext="发布人不能为空" placeholder="请输入发布人" value="111"  class="layui-input">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">标题</label>
            <div class="layui-input-block">
                <input type="text" th:field="*{title}" id="title" name="title" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入标题" value="" class="layui-input">
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label required">照片</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" th:field="*{photo}" id="photo" name="photo"  value="" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
        <!--图片上传-->
        <div class="layui-form-item">
            <label class="layui-form-label">照片</label>
            <div class="layui-input-block">
                <!-- 上传按钮 -->
                <button type="button" class="layui-btn" id="upload1">
                    上传图片
                </button>
                <!-- 隐藏的input  th:value=""${obj?.pic}-->
                <input type="hidden" id="photo" name="photo" th:field="*{photo}"/>
                <!-- 预览区域 style="display: none;"-->
                <div id="imgDiv" class="layui-upload-list" >
                    <img class="layui-upload-img" width="100px" height="80px" id="demo1" name="msg" th:src="*{'uploadImages/'+photo}"/>
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea th:field="*{content}" name="content" class="layui-textarea" placeholder="请输入资讯内容"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery-3.6.3.js"></script>
<script>
    layui.use(['form','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.$;

        //图片上传
        var uploadInst = upload.render({
            elem: '#upload1'
            ,url: '/uploadFile'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功');
                //将图片的名字放在表单中，添加的时候得放在数据库里面
                $(function(){
                    $("#photo").val(res.msg);
                    $("#imgDiv").css("display","")// 显示图片框
                    //alert('赋值成功');
                })
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                    });
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var zixunData = data.field;
            $.ajax({
                type: 'POST',
                url: window.location.protocol + '//' + window.location.host + '/editAdZixun',
                dataType: 'html',
                data: JSON.stringify(zixunData),
                contentType: 'application/json',
                success: function (data) {
                    // 关闭弹出层
                    if (data){
                        parent.layer.msg("提交成功");
                        parent.layui.table.reload('currentTableId');
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }else {
                        layer.msg("服务器异常，请稍后重试！");
                    }

                },
                error: function () {
                    //console.log(data);
                    layer.alert("请求超时！")
                }
            });
            return false;
        });

    });
</script>
</body>
</html>